<template>
  <div>
    <div class="picture">
      <img src="//xs01.meituan.net/waimai_i/img/bannertemp.e8a6fa63.jpg" />
    </div>
  
    <div class="header">
      <div class="address">
        <i class="iconfont">&#xe604;</i>
        <span>深圳市-广东省</span>
        <i class="iconfont">&#xe612;</i>
      </div>
      <router-link to='/search'>
        <div class="search">
          <i class="iconfont">&#xe61e;</i>
          <span>鸡排</span>
        </div>
      </router-link>
    </div>
  
    <div class="banner">
      <ul>
        <router-link to="/list">
          <li>
            <img src="http://p1.meituan.net/jungle/bd3ea637aeaa2fb6120b6938b5e468a13442.png.webp" />
            <span>美食</span>
          </li>
        </router-link>
        <router-link to="/list">
          <li>
            <img src="http://p0.meituan.net/jungle/6b93ee96be3df7cf2bb6e661280b047d3975.png.webp" />
            <span>超市</span>
          </li>
        </router-link>
        <router-link to="/list">
          <li>
            <img src="http://p0.meituan.net/jungle/f33ed552c52b4466b6308a2c14dbc62d4882.png.webp" />
            <span>鲜果购</span>
          </li>
        </router-link>
        <router-link to="/list">
          <li>
            <img src="http://p0.meituan.net/jungle/45816fffb346c194d58e961fde7c0fad4901.png.webp" />
            <span>甜点饮品</span>
          </li>
        </router-link>
      </ul>
  
      <ul class="ul2">
        <router-link to="/list">
          <li>
            <img src="http://p1.meituan.net/jungle/1543bbcb048218424e2420a6934e17b24236.png.webp" />
            <span>正餐优选</span>
          </li>
        </router-link>
        <router-link to="/list">
          <li>
            <img src="http://p0.meituan.net/jungle/f51c34aea31bf3685be15dedde2632bc5391.png.webp" />
            <span>美团专送</span>
          </li>
        </router-link>
        <router-link to="/list">
          <li>
            <img src="http://p0.meituan.net/jungle/9422ca734dc0a4fea8cdcf6093cf6b4b5441.png.webp" />
            <span>夜宵</span>
          </li>
        </router-link>
        <router-link to="/list">
          <li>
            <img src="http://p1.meituan.net/jungle/a64dabee2a8c21626dc46c3002467d5f4254.png.webp" />
            <span>精选小吃</span>
          </li>
        </router-link>
      </ul>
    </div>
  
    <div class="title">
      <div class="title-box">
        <span class="span1"></span>附近商家
        <span class="span2"></span>
      </div>
    </div>
  
    <ul class="shops">
      <router-link to='/detail/order'>
        <li :key='index' v-for="(item,index) in list">
          <div class="shops-left">
            <img :src='item.pic_url' />
            <div>品牌</div>
          </div>
          <div class="shops-right">
            <div class="name">{{ item.name }}</div>
            <div class="star">
              <div class="star-l">
                <i class="iconfont">&#xe601;</i>
                <i class="iconfont">&#xe601;</i>
                <i class="iconfont">&#xe601;</i>
                <i class="iconfont">&#xe601;</i>
                <i class="iconfont">&#xe601;</i>
                月售{{ item.month_sale_num }}</div>
              <div class="star-r">
                <span class="span1">{{ item.avg_delivery_time }}min</span>
                <span>{{ item.distance }}</span>
              </div>
            </div>
            <div class="money">
              <div class="money-l">
                <span class="span1">{{ item.min_price_tip }}</span>
                <span>{{ item.shipping_fee_tip }}</span>
              </div>
              <div class="money-r">美团专送</div>
            </div>
          </div>
        </li>
      </router-link>
    </ul>
  
    <Footerr></Footerr>
  
  </div>
</template>
<script>
import Footerr from './Footerr'
import axios from 'axios'
export default {
  data() {
    return {
      list: []
    }
  },
  components: {
    Footerr,
  },
  created() {
    var that = this
    axios.get('/api/polist').then(function (res) {
      //      console.log(res);
      that.list = res.data.data;
      //      console.log(that.list);
    }).catch(function (err) {
      console.log(err);
    })
  }


}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';

.picture {
  img {
    width: px2rem(750);
    height: px2rem(340);
  }
}

.header {
  position: absolute;
  top: 0;
  display: flex;
  .address {
    padding: 0 px2rem(20);
    margin: px2rem(20) px2rem(24) 0 px2rem(52);
    /*display: inline-block;*/
    height: px2rem(56);
    width: px2rem(280);
    color: #ffffff;
    font-size: px2rem(24);
    line-height: px2rem(56);
    background: rgba(0, 0, 0, 0.3);
    border-radius: px2rem(26);
    /*max-width: 40%;*/
    display: flex;

    justify-content: space-between;
    .iconfont {
      font-size: px2rem(32);
    }
  }

  .search {
    margin: px2rem(24) 0 0 px2rem(20);
    width: px2rem(340);
    height: px2rem(56);
    background: white;
    border-radius: px2rem(28);
    line-height: px2rem(56);
    color: #333;
    font-size: px2rem(26);
    span {
      margin-right: px2rem(150);
    }
    .iconfont {
      font-size: px2rem(30);
      padding-left: px2rem(20);
    }
  }
}

.banner {
  background: white;
  ul {
    padding-top: px2rem(30);
    margin-top: px2rem(-15);
    display: flex;
    justify-content: space-around;
    li {
      display: flex;
      flex-direction: column;
      text-align: center;
      img {
        width: px2rem(94);
        height: px2rem(94);
        padding-bottom: px2rem(24);
      }
      span {
        font-size: px2rem(26);
        color: #2f2f2f;
      }
    }
  }

  .ul2 {
    padding-bottom: px2rem(60);
  }
}

.title {
  margin-top: px2rem(20);
  padding-top: px2rem(30);
  display: flex;
  justify-content: center;
  background: white;
  height: px2rem(75);
  line-height: px2rem(75);
  font-size: px2rem(33);
  color: #333;
  .title-box {
    margin-top: px2rem(-24);
    color: #333333;
    .span1 {
      display: block;
      width: px2rem(60);
      height: px2rem(0);
      border-bottom: px2rem(1) solid #333;
      position: relative;
      top: px2rem(35);
      left: px2rem(-70);
    }
    .span2 {
      display: block;
      width: px2rem(60);
      height: px2rem(0);
      border-bottom: px2rem(1) solid #333;
      position: relative;
      top: px2rem(-40);
      left: px2rem(140);
    }
  }
}

.shops {
  margin-bottom: px2rem(100);
  li {
    height: px2rem(185);
    padding: px2rem(30) 0 px2rem(25) px2rem(20);
    display: flex;
    border-bottom: px2rem(1) solid #f2f2f2;
    background: white;
    .shops-left {
      img {
        width: px2rem(168);
        height: px2rem(126);
        margin-right: px2rem(16);
      }
      div {
        position: relative;
        top: px2rem(-137);
        width: px2rem(56);
        height: px2rem(30);
        line-height: px2rem(30);
        font-size: px2rem(26);
        text-align: center;
        background: #FFA627;
        color: white;
      }
    }
    .shops-right {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: px2rem(32);
        color: #333333;
        text-align: left;
      }
      .star {
        display: flex;
        justify-content: space-between;
        .star-l {
          font-size: px2rem(22);
          color: #656565;
          .iconfont {
            font-size: px2rem(16);
            color: #ffd161;
            margin-right: px2rem(5); // background: #ffd161;
          }
        }
        .star-r {
          font-size: px2rem(22);
          color: #656565;
          margin-right: px2rem(30);
          .span1 {
            display: inline-block;
            padding-right: px2rem(10);
            margin-right: px2rem(10);
            border-right: px2rem(2) solid #dcdcdc;
          }
        }
      }
      .money {
        display: flex;
        justify-content: space-between;
        .money-l {
          font-size: px2rem(22);
          color: #656565;
          .span1 {
            display: inline-block;
            padding-right: px2rem(10);
            margin-right: px2rem(10);
            border-right: px2rem(2) solid #dcdcdc;
          }
        }
        .money-r {
          font-size: px2rem(22);
          color: #656565;
          margin-right: px2rem(30);
          padding: px2rem(5);
          background: #ffd161;
          border-radius: px2rem(20) 0 px2rem(20) 0;
        }
      }
    }
  }
}
</style>